<template>
	<view class="content" :style="[getpaddingTop]">
		<view class="navTabBox" :class="{isFixed:isFixed}" ref="fixedBar" >
			<view class="longTab">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
					:scroll-left="tabLeft" show-scrollbar="true">
					<view class="longItem" :data-index="index" :class="index===tabClick?'click':''"
						v-for="(item,index) in tabList" :key="index" :id="'id'+index" @click="longClick(index,item)">
						{{ item.title }} <span v-if="item.total"> {{'('+item.total+')'}}</span>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view>
			<order-list :orderList='orderList' @goDetails="goDetails" @handleMaskClick="handleMaskClick" @updateStatus="updateStatus"></order-list>
		</view>

	</view>
</template>
<script>
	import orderList from '@/components/base/order-list.vue'
	import getList from '@/mixins/getlist.js'
	import {
		roomOrderList
	} from '@/api/index.js'

	export default {
		components: {
			orderList
		},
		mixins: [getList],
		data() {
			return {
				isLoading: false,
				isFixed: true,
				isFixedTop: 0,
				tabClick: 0,
				tabLeft: 0,
				tabList: [{
						title: '全部',
						orderStatus: null,
						total: 0
					},
					{
						title: '待备货',
						orderStatus: 14,
						total: 0
					},
					{
						title: '待配送',
						orderStatus: 10,
						total: 0
					}, {
						title: '待自提',
						orderStatus: 3,
						total: 0
					}, {
						title: '配送中',
						orderStatus: 11,
						total: 0
					},
					{
						title: '已送达，待签收',
						orderStatus: 12,
						total: 0
					},
					{
						title: '已完成',
						orderStatus: 6,
						total: 0
					},
					{
						title: '已取消',
						orderStatus: 9,
						total: 0
					}
					// , {
					// 	title: '退款',
					// 	orderStatus: 100
					// }
				],

			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: function(e) {
					console.log(e.windowTop, 39);
					this.windowTop = e.windowTop
				}
			})

		},
		onShow() {
			this.tabClick = 0;
			this.getOrderList()
		},
		computed: {
			getpaddingTop() {
				return {
					paddingTop: this.windowTop * 2 + 'px',
				}
			},
			getTabType() {
				return this.tabList[this.tabClick].orderStatus
			}

		},
		mounted() {
			this.setFixedTop();
		},
		methods: {
			updateStatus(){
				this.tabClick = 0;
				this.page = 1
				this.orderList = []
				this.getOrderList()
			},
			handleMaskClick(){
				this.tabClick = 0;
				this.getOrderList()

			},
			setFixedTop() {
				this.$nextTick(() => {
					uni.createSelectorQuery()
						.in(this)
						.select('.longTab')
						.boundingClientRect(rect => {
							if (rect) {
								// 获取设备信息
								const sys = uni.getSystemInfoSync();
								// 判断是否为iPad
								const isIpad = sys.model && sys.model.toLowerCase().includes('ipad');
								if (isIpad) {
									this.isFixedTop = 0;
								} else {
									
									this.isFixedTop = rect.height - 2;
									this.isFixedTop = 0;
								}
							}
						})
						.exec();
				});
			},
			goDetails(item) {
				uni.navigateTo({
					url: '/pages/orderDetails/orderDetails?orderNo=' + item.orderNo
				})
			},
			onPullDownRefresh() {
				this.loadend = false;
				this.loading = false;
				this.page = 1
				this.orderList = []
				this.getOrderList().then(res => {
					uni.stopPullDownRefresh();
				})

			},
			getRefundList(){
				console.log(108);
			},
			/**
			 * 切换类型
			 */
			longClick(index, item) {
				if (index == this.tabClick) return;
				this.tabClick = index; //设置导航点击了哪一个
				this.loadend = false;
				this.page = 1;
				this.orderList = []
				if(item.title=='退款'){
					return this.getRefundList()
				}
				this.getOrderList()
				this.isLoading = true
				setTimeout(() => {
					this.isLoading = false
				}, 2000)
				console.log(96);
				this.$nextTick(() => {
					let id = 'id' + index;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
					//this.$emit('changeTab', index,item);
					this.setFixedTop(); // tab切换后重新计算高度
				})
			},
			getOrderList() {
				return new Promise((resolve, reject) => {
					let that = this;
					if (that.loadend) return reject();
					if (that.loading) return reject();
					that.loading = true;
					that.loadTitle = "加载更多";
					roomOrderList({
						page: that.page,
						limit: that.limit,
						orderStatus: this.getTabType
					}).then(res => {
						let list = res.data.orderFrontDataResponseList.list || [];
						// console.log(res.data.map,1821);
						let mapData = res.data.map;
						try {
							mapData.forEach(item => {
								// console.log(item,185);
								let index = this.tabList.findIndex(ite => ite.orderStatus === item.orderStatus)
								console.log(index,186);
								// this.$set(this.tabList[index],'total',item.total)
								try{
									this.tabList[index].total = item.total
								}catch(e){
									console.log(e,186);
								}
							
							})
						} catch (e) {}
						let loadend = list.length < that.limit;
						that.orderList = that.$util.SplitArray(list, that.orderList);
						that.$set(that, 'orderList', that.orderList);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? "我也是有底线的" : '加载更多';
						that.page = that.page + 1;
						that.isShow = true;
						resolve(true)
					}).catch(err => {
						that.loading = false;
						that.loadTitle = "加载更多";
						reject(err)
					})
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.navTabBox {
		// height: 60rpx;
		padding: 8rpx 0;
	}

	.content {
		height: 100vh;
		background: #F5F5F5;
		box-sizing: border-box;
	}

	.isFixed {
		z-index: 10;
		position: fixed;
		background: #F5F5F5;
		left: 0;
		width: 100%;
		// #ifdef APP-PLUS
		top: 0;		
		// #endif		
		
		// #ifdef H5
		top: 100rpx;
		// #endif
	}

	.longTab {
		.longItem {
			height: 70rpx;
			display: inline-block;
			line-height: 70rpx;
			text-align: center;
			font-size: 36rpx;
			color: #333333;
			white-space: nowrap;
			// overflow: hidden;
			text-overflow: ellipsis;
			margin-left: 60rpx;

			&.click {
				font-weight: bold;
				font-size: 64rpx;
				position: relative;

				&::after {
					content: '';
					width: calc(100%);
					height: 8rpx;
					// background: var(--color);
					background-color: #E93323;
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
</style>
